<template>
  <div class=" layout-container p-2 absolute inset-0 box-border">
    <el-tabs v-model="query.tabname" class="tab-card border-2 bg-stone-50 " type="border-card" @tab-click="onTabsClick"
             v-if="tabs.length">
      <el-tab-pane
        v-for="item in tabs"
        :key="item.value"
        :label="item.name"
        :name="item.value"
      >
        <template #label>
          <span><i :class="['iconfont', item.icon, 'mr-2']"></i>{{ item.name }}</span>
        </template>
        <div class="layout-padding-auto ">
          <component
            :is="activeTab.tab"
            :ref="'tab' + activeTab.value"
            :tabindex="activeTab.value"
            :params="activeTab.params"
          />
        </div>

      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script setup>
import '@/style/tailwind.css'
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import AGVQuantityStatistics from './components/AGVQuantityStatistics.vue'
import AGVPowerInterval from './components/AGVPowerInterval.vue'
import AlarmLevel from './components/AlarmLevel.vue'
import AGVDetails from './components/AGVDetails.vue'

const route = useRoute()
const router = useRouter()

const query = ref({
  tabname: '0'
})

const cache = ref({})
const tabRefs = ref({}) // 用于存储 tab 的引用

const tabList = [
  {
    name: 'AGV数量统计明细',
    tab: 'AGVSLTJMX',
    icon: 'icon-ic_data'
  },
  {
    name: 'AGV电量区间明细',
    tab: 'AGVDLQJMX',
    icon: 'icon-ico-book'
  },
  {
    name: '报警等级数量统计明细',
    tab: 'BJDJXL',
    icon: 'icon-baojing2'
  },
  {
    name: 'AGV明细',
    tab: 'AGVMX',
    icon: 'icon-zhihanglitubiao-18'
  },
]

const tabConf = [
  {
    name: 'AGV数量统计明细',
    tab: AGVQuantityStatistics,
    value: '0',
    auth: 'AGVSLTJMX'
  },
  {
    name: 'AGV电量区间明细',
    tab: AGVPowerInterval,
    value: '1',
    auth: 'AGVDLQJMX'
  },
  {
    name: '报警等级数量统计明细',
    tab: AlarmLevel,
    value: '2',
    auth: 'BJDJXL'
  },
  {
    name: 'AGV明细',
    tab: AGVDetails,
    value: '3',
    auth: 'AGVMX'
  },
]

const tabs = computed(() => {
  const merge = (x, y) => {
    if (!y) return
    Object.assign(x, y)
  }

  return tabList.filter(x => {
    const cur = tabConf.find(y => y.auth == x.tab)
    merge(x, cur)
    return !!cur
  })
})

const activeTab = computed(() => {

 // console.log(tabs, 'tabs')
 // console.log(tabs.value.find(i => i.value == query.value.tabname), 'query.value.tabname')
  return tabs.value.find(i => i.value == query.value.tabname) || tabs.value[0]
})

onMounted(() => {
  query.value = { ...query.value, ...route.query }
  query.value.tabname = query.value.tabname || tabs.value[0]?.value || '0'

  if (!route.query.tabname) {
    router.replace({
      path: route.path,
      query: { tabname: query.value.tabname }
    })
  }
  init(query.value.tabname || '0')
})

const onTabsClick = (v) => {
  const { tabname = tabs.value[0].value } = route.query
  if (tabname) {
    cache.value['tab' + tabname] = {
      ...route.query,
      page: 1
    }
  }


  console.log(activeTab.value.value,'vvvv')
  init(activeTab.value.value)
  setPath()
}

const setPath = () => {
  const queryData = cache.value['tab' + query.value.tabname]
  if (route.query.tabname !== activeTab.value.value) {
    if (queryData) {
      queryData.page = 1
    } else {
      query.value.page = 1
    }
  }
  router.push({
    path: route.path,
    query: queryData || query.value
  })
}

const init = (tabname) => {
  setTimeout(() => {
    // const tab = tabRefs.value['tab' + tabname] // 使用 tabRefs 来访问
    // if (tab && tab.init) {
    //   tab.init()
    // }
   router.replace({
     path: 'statisticsList',
     query: { tabname: activeTab.value.value, page: 1 }, // 更新查询参数
   });
  }, 0)
}

// 监听 tab 的引用
const registerRef = (tabName, ref) => {
  tabRefs.value[tabName] = ref
}


</script>

<style scoped lang="scss">

.config-container {
  .el-tabs {
    .el-tabs__nav-scroll {
      background-color: #ffffff;
      padding: 10px 30px 0 30px;

      .el-tabs__item {
        margin-bottom: 10px;
      }

    }

    .el-tabs__content {
      height: calc(100% - 80px);
      overflow-y: auto;

    }
  }


}


</style>
